<template>
  <div class="show_total" :style="{ color: importData.color }">
    <!-- 左侧 -->
    <div class="left">
      <!-- 分数部分 -->
      <div
        :style="{
          'background-image': `url(${require('@/assets/images/' +
            importData.image)})`,
        }"
        class="imageDiv"
      >
        <division :fz="importData.fz" :fm="importData.fm"></division>
      </div>
      <!-- 描述部分 -->
      <div style="font-size: 1.325rem">{{ importData.thing }}</div>
      <div>
        <span style="color: rgba(255, 255, 255, .8)">环比</span> &nbsp;
        <span v-if="importData.add > 0" style="color: #facc29">
          ↑ {{ importData.add }} %
        </span>
        <span v-else style="color: red"> ↓ {{ -importData.add }} % </span>
      </div>
    </div>
    <div class="right">
      <section v-for="(item, index) in importData.events" :key="index">
        <p style="font-size: 1.6rem; font-weight: 700; height: 30px">
          {{ item.amount }}
        </p>
        <p class="p_b">{{ item.title }}</p>
      </section>
    </div>
  </div>
</template>

<script>
import Division from "./Division.vue";
export default {
  components: { Division },
  props: {
    importData: {
      type: Object,
      default: {},
    },
  },
};
</script>


<style lang="scss" scoped>
.show_total {
  display: flex;
  justify-content: center;
  font-size: 1.075rem;
  height: 40%;
  .left {
    width: 35%;
    margin-right: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    // 图片盒子
    .imageDiv {
      width: 100%;
      height: 59%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      background-position: center center;
      background-repeat: no-repeat;
      background-size: contain;
      margin-bottom: 10px;
    }
  }
  .right {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    height: 90%;
    section {
      width: 50%;
      height: 50%;
      border: 1px solid transparent;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-content: center;
      background: url(../../assets/images/zhaqts_06@3x.png) no-repeat center
        center;
      background-size: contain;
      &:nth-of-type(4n + 1) {
        border-bottom: 1px solid #153179;
        border-right: 1px solid #153179;
      }
      &:nth-of-type(4n + 2) {
        border-bottom: 1px solid #153179;
      }
      &:nth-of-type(4n + 3) {
        border-right: 1px solid #153179;
      }
      .p_b {
        padding:0 0 0 3px;
       color : rgba($color: #fff, $alpha:0.8);
        white-space: nowrap; /* 不换行 */

        overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */

        text-overflow: ellipsis; /*溢出时显示省略标记...；需与overflow:hidden;一起使用*/
      }
      p {
        width: 100%;
        margin-bottom: 2px;
      }
    }
  }
}
</style>
